<template>
  <el-drawer :model-value="visible" title="入住详情" :size="mobile ? '100%' : 600" append-to-body lock-scroll @close="handleClose">
    <div>
      <el-row align="middle">
        <el-col :span="12"><span>{{ `${roomInfo.roomName}` }}</span></el-col>
        <div style="margin-left: auto;">
          <div v-if="!mobile">
            <el-button plain @click="handleUtilityBills">水电记录</el-button>
            <el-button type="primary" @click="handlePermission">开门权限</el-button>
          </div>
          <el-dropdown trigger="click" placement="bottom-start" @command="handleCommand" v-else>
            <el-icon class="ml20" style="cursor: pointer;"><MoreFilled /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="utilityBills">水电记录</el-dropdown-item>
                <el-dropdown-item command="permission">开门权限</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-row>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="入住详情" name="lodging">
          <LodginPane v-if="activeName === 'lodging'" :checkInId="checkInId"></LodginPane>
        </el-tab-pane>
        <el-tab-pane label="完成账单" name="completedBilling">
          <CompleteBillingPane v-if="activeName === 'completedBilling'"></CompleteBillingPane>
        </el-tab-pane>
        <el-tab-pane label="待收账单" name="incompleteBilling">
          <IncompleteBillingPane v-if="activeName === 'incompleteBilling'"></IncompleteBillingPane>
        </el-tab-pane>
      </el-tabs>
    </div>
    <UtilityBills :visible="utilityBillsVisible"></UtilityBills>
  </el-drawer>
</template>
<script setup name="LodgingDetail">
import useAppStore from '@/store/modules/app'
import LodginPane from './lodgingPane.vue'
import CompleteBillingPane from './completeBillingPane.vue'
import IncompleteBillingPane from './incompleteBillingPane.vue'
import UtilityBills from '../utilityBills.vue'
import checkInApi from '@/api/room/checkin'
import roomApi from '@/api/room/room'
import { provide, readonly } from 'vue'

const router = useRouter()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  checkInId: {
    type: [Number, String],
    default: ''
  },
  roomInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const activeName = ref('lodging')
const utilityBillsVisible = ref(false)
const checkInInfo = ref({})
provide('checkInInfo', {
  checkInInfo,
  updateCheckInInfo: getCheckInInfo
})
const mobile = computed(() => useAppStore().device === 'mobile')

function handleTabChange(value) {
  
}

// 下来选项
function handleCommand(value) {
  switch (value) {
    case 'utilityBills':
      handleUtilityBills()
      break;
  
    default:
      break;
  }
}

// 水电记录点击弹窗
function handleUtilityBills() {
  utilityBillsVisible.value = true
}

/* 获取入住人 */
function getCheckInInfo() {
  if (!props.checkInId || props.checkInId === '') {
    return
  }
  checkInApi.getInfo(props.checkInId).then(res => {
    checkInInfo.value = res.data
  })
}


function handlePermission() {
  emit('cancel')
  router.push({ path: '/room/permission', query: { id: 1,checkId:2 } })
}

function handleClose() {
  emit('cancel')
}

getCheckInInfo()
</script>
<style lang="scss" scoped>

</style>